Skip to main content

CacheProvider Component & CacheContext

Created by: James Liu Created time: March 27, 2024 12:58 PM Tags: Data Fetching, Frontend

Overview​

The CacheProvider component is designed to facilitate data fetching and caching in a React application. It provides a centralized cache mechanism to store and reuse data, minimizing unnecessary network requests. By leveraging this component, child components can perform data fetching operations for rooms, specific room details, free rooms based on certain criteria, batch data fetching, and search operations with reduced network overhead. The provided CacheContext allows any component in the application to access these functionalities.

Functionality​

  • Caching Mechanism: Stores responses from data fetching operations to reuse in subsequent requests, reducing the number of network calls.
  • Data Fetching: Includes functions to fetch rooms, room details, free rooms, batch data, and perform search operations, utilizing both fetch and axios for network requests.
  • Debounce Utility: Provides a debounce function to limit the frequency of function executions, useful for optimizing search functionality.

Key Hooks​

  • createContext and useContext: Used to create and consume the cache context throughout the application.
  • useState and useEffect: These hooks could potentially be used within child components consuming the context for state management and side effects based on fetched data (not explicitly shown in this component).

Functions​

getRooms​

Fetches and caches a list of rooms. Uses cached data if available to avoid repeated requests.

getRoom​

Fetches and caches details for a specific room by ID. Reuses cached data if the same room details are requested again.

getFreeRooms​

Takes a query parameter and fetches a list of rooms that are free according to the specified criteria. Caches and reuses the response for identical queries.

getBatch​

Fetches data for a batch of queries and caches the responses. Intended to efficiently load data for multiple items in a single request.

Performs a search operation based on a query, attributes, and sorting criteria. Supports authorization through a bearer token stored in local storage.

debounce​

Utility function to debounce another function, limiting the rate at which it can be invoked. Useful for optimizing real-time search operations or any function that should not execute too frequently.

Context​

  • CacheContext: Makes the caching mechanism and data fetching functions available to any consuming component in the application.

Usage​

Wrap the root component of your application with the CacheProvider to make the cache context available throughout your application:

<CacheProvider>
  <App />
</CacheProvider>

Consume the context in child components to access the caching and data fetching functionalities:

const { getRoom, search } = useCache();

Error Handling​

Error handling is implemented in each data fetching function with try-catch blocks, logging errors to the console. Functions return undefined or an empty array on failure, so consumers should handle these cases accordingly.

Dependencies​

  • axios: Used for making HTTP POST requests.
  • React Router's useNavigate: While not used directly in the provided code, it's often used in conjunction with context providers for redirecting users (e.g., on unauthorized access).

Props​

  • children: The child components that CacheProvider will wrap. This is a React pattern for context providers to render their children.